
{% extends "base2.html" %}

{% block title %}Event details{% endblock %}

{% block head %}

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var event_id, map, marker, eventByID = {};


function placeMarker(position, map) {
	var location_field = document.getElementById("id_location");
	location_field.value = "POINT(" + position.lat() +" " + position.lng() + ")" ;
	
	marker = new google.maps.Marker({
		position: position,
		map: map
	});
	map.panTo(position);
}


function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(41.879535, -87.624333),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    placeMarker(new google.maps.LatLng(event.lat, event.lng), map);
}


</script>
<style>
    body {font-family: sans-serif}
    #map {width: 80%; height: 300px; margin-left: auto; margin-right: auto}
    #events {overflow: auto; width: 500px; height: 100px}
    .linkOFF {color: darkblue}
    .linkON {color: white; background-color: darkblue}
</style>

{% endblock %}

{% block header %}
	<center><H1>Mapa Imprez - Add event</H1></center>
{% endblock %}

{% block content %}

<body onload='initialize()'>
    <div id=map></div>
    Description:
    <br>
    <p>{{event.description}}</p>
    <br>
    Add new comment:
    <form action="" method="post">
    	{% csrf_token %}
	    {{form.as_p}}
        <input type="submit" value="Save" />
    </form>
    
    {{comments}}
</body>
{% endblock %}

